<script>
import { postM3u8Id } from "../../../api/video/video";
import VideoPlayer from "../../../components/video/VideoPlayer.vue";

export default {
  name: "VideoPlay",
  components: { VideoPlayer },
  data() {
    return {
      m3u8Id: this.$route.query.m3u8Id || this.$route.params.m3u8Id,
      fileUrl: this.$route.query.fileUrl || this.$route.params.fileUrl, // 默认从 query 中获取
    };
  },
  mounted() {
    this.postM3u8Id();
  },
  methods: {
    // 执行一个post操作
    postM3u8Id() {
      console.log(this.fileUrl);
      postM3u8Id(this.m3u8Id, this.fileUrl).then((response) => {
        console.log(response);
      });
    },
  },
};
</script>

<template>

  <body>
    <div class="bili_header">
      <!-- 左侧内容 -->
      <div class="blili_bar_left">
        <ul>
          <li>
            <a href="#">
              <img
                src="../../../assets/images/bilibili.png"
                alt=""
                style="width: 60px; height: 30px;"
              />
            </a>
          </li>
          <li><a href="#">首页</a></li>
          <li><a href="#">番剧</a></li>
          <li><a href="#">直播</a></li>
          <li><a href="#">游戏中心</a></li>
          <li><a href="#">会员购</a></li>
          <li><a href="#">漫画</a></li>
          <li><a href="#">赛事</a></li>
        </ul>
      </div>

      <!-- 中间输入框 -->
      <div class="bili_bar_input">
        <el-input
          placeholder="要查询什么呢...."
          suffix-icon="el-icon-search"
          style="width: 500px;"
        ></el-input>
      </div>

      <!-- 右侧内容 -->
      <div class="bili_bar_right">
        <ul>
          <li class="login">
            <a href="#">
              <span class="login-icon">登录</span>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/icon-vip.png"
                  alt="大会员图标"
                  style="margin-left: 3px;"
                />
              </div>
              <div class="text">大会员</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/mess.png"
                  alt="消息图标"
                />
              </div>
              <div class="text">消息</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/dynamic.png"
                  alt="动态图标"
                />
              </div>
              <div class="text">动态</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/icon-favorite.png"
                  alt="收藏图标"
                />
              </div>
              <div class="text">收藏</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/icon-history.png"
                  alt="历史图标"
                />
              </div>
              <div class="text">历史</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <img
                  src="../../../assets/images/icon-creator.png"
                  alt="创作中心图标"
                  style="margin-left: 10px; margin-bottom: 3px;"
                />
              </div>
              <div class="text">创作中心</div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="video_play">
      <VideoPlayer
        :videoSrc="`http://192.168.65.130/hls/${this.m3u8Id}.m3u8`"
        style="width: 500px; height: 300px;"
      ></VideoPlayer>
    </div>

  </body>
</template>

<style scoped>
body {
  width: 100%;
  height: 100%;
  background-color: #f3f2f5;
}

.bili_header {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右两侧靠边，中间内容居中 */
  min-height: 64px;
  max-width: 2560px;
  margin: 0 auto;
  width: 100%;
  background-color: #fff;
  padding: 0 30px; /* 给左右两边留一些内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
}

.blili_bar_left ul,
.bili_bar_right ul {
  list-style-type: none; /* 去除小圆点 */
  padding: 0;
  margin: 0;
  display: flex; /* 横向排列 */
  align-items: center; /* 垂直居中 */
}

.blili_bar_left li,
.bili_bar_right li {
  height: 64px; /* 确保和 header 高度一致 */
  display: flex; /* 使用 flexbox */
  align-items: center; /* 垂直居中 */
  margin-right: 20px; /* 设置间距，可根据需要调整 */
}

.blili_bar_input {
  flex-grow: 5; /* 中间部分占据剩余空间 */
  display: flex;
  justify-content: center; /* 水平居中 input */
  align-items: center; /* 垂直居中 */
  max-width: 400px; /* 限制最大宽度 */
}

.bili_bar_input input {
  width: 100%; /* 宽度占满父容器 */
  max-width: 400px; /* 限制最大宽度 */
  height: 36px; /* 输入框高度 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 4px; /* 圆角边框 */
  padding: 0 10px; /* 内边距 */
  box-sizing: border-box;
}

a {
  text-decoration: none; /* 去除下划线 */
  color: #000; /* 设置文字颜色 */
}

a:hover {
  color: #007bff; /* 鼠标悬停时的颜色效果 */
}

.bili_bar_right li.login a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%; /* 圆形 */
  background-color: #00aeec; /* 蓝色背景 */
  color: #fff; /* 白色字体 */
  font-weight: bold;
}

.bili_bar_right li .icon {
  width: 20px;
  height: 20px;
  margin-bottom: 2px; /* 图标和文字间距 */
}

.bili_bar_right li .icon img {
  width: 100%;
  height: 100%;
}

.bili_bar_right li .text {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.video_play {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 如果需要垂直居中，可以加上这个 */
  margin: 20px auto; /* 设置自动水平居中 */
  width: 100%; /* 宽度设为100% */
}
</style>
